/*
 *  @author zhangqiang
 *  @data 2017/07/26
 *   添加地址
 * */

import React, { Component } from 'react';
import {Toast,Picker, List} from 'antd-mobile';
import {createForm} from 'rc-form';
import {Title} from '../../components/common'
import {
	setAddAddress,
	address
} from '../../actions/addAddressActions';
import NotExpression from '../../utils/expression'
import style from './index.scss'
import {connect} from 'react-redux';
import {InputItem} from '../../components/home'
import common from '../../utils/common'
import '../../../styles/addAddress.scss';

class addAddress extends Component {
    constructor(props) {
        super(props);
        this.state = {
	        name: '', //姓名 自由类型
	        nameImg: false,
	        nameWidth: '.3rem', // 姓名的默认宽度
	        nameNoBlur: true, //点击删除按钮不执行失去焦点验证
	        phone: '', //姓名 自由类型
	        phoneImg: false,
	        phoneWidth: '.3rem', // 姓名的默认宽度
	        phoneNoBlur: true, //点击删除按钮不执行失去焦点验证
	        details: '', //详细信息
	        addressData: '', //省市区地址数据
        }
	}
	
    componentDidMount() {
		common.setViewTitle('添加地址');
		this.getAllAddressList()
    }

    getAllAddressList(){
	    let getData={
			provinceId: 440000,
			bizType: 0
		}
		this.props.dispatch(address(getData))
    }

	/*
		*   省市区
		* */
	getRegion(e){
		document.querySelector('.am-list-extra').style.color='#1a1a1a';
	}

	subMit(){
			this.props.form.validateFields((error, value) => {
				let telNum = this.state.phone.replace(/\s+/g, ""),
					reg = /^0?1[3|4|5|7丨8][0-9]\d{8}$/,
					// reg_name = /^[a-zA-Z\u4e00-\u9fa5\s]{1,20}$/,
					 reg_name = /^[\u4e00-\u9fa5]{2,12}$/,
					reg_details = /^[\u4e00-\u9fa5]{5,100}$/;
				
				if (this.state.name == '' || !this.state.name || this.state.name.replace(/(^\s*)|(\s*$)/g, "") == "") {
					Toast.info('请输入正确的收件人姓名', 1);
					return false;
				} else if (!reg_name.test(this.state.name)) {
					Toast.info('姓名格式错误', 1)
					return false;
				} else if (NotExpression.isEmojiCharacter(this.state.name.toString())) {
					Toast.info('姓名不能包含表情', 1);
					return false;
				} else if (this.state.phone == '' || !this.state.phone) {
					Toast.info('请输入正确的联系电话', 1);
					return false;
				} else if (!reg.test(telNum)) {
					Toast.info('手机格式错误', 1)
					return false;
				} else if (!value.district) {
					Toast.info('请选择所在地区', 1);
					return false;
				} else if (this.state.details == '' || !this.state.details|| this.state.details.replace(/(^\s*)|(\s*$)/g, "") == "") {
					Toast.info(' 请输入详细地址', 1);
					return false;
				} else if (this.state.details.toString().length < 5) {
					Toast.info('详细地址长度应不少于5位', 1);
					return false;
				}
			
				let countyName = value.district[2] ? value.district[2].split(',')[0] : '';//所在区
				let fullAddr = value.district[0].split(',')[0]+value.district[1].split(',')[0]+value.district[2].split(',')[0]+this.state.details;
				let postData = {
					contactName: this.state.name,
					cellNum: this.state.phone,
					street: this.state.details,
					provinceId: value.district[0] ? value.district[0].split(',')[1] : null, //省份code
					provinceName: value.district[0] ? value.district[0].split(',')[0] : null, //省份
					cityId: value.district[1] ? value.district[1].split(',')[1] : null,//城市code
					cityName: value.district[1] ? value.district[1].split(',')[0] : null,//城市
					countyId: value.district[2] ? value.district[2].split(',')[1] : '',//所在区code
					countyName: countyName.replace(null,''),
					fullAddr: fullAddr.replace(null,'')
				};
				this.props.dispatch(setAddAddress(postData,()=>{
					Toast.info('添加成功',1)
					setTimeout(()=>{
						window.history.back()
					},250)
				}))
			});
		}

    render() {
	    const { getFieldProps } = this.props.form;
		let that = this;
	    return (
			<div className={style.addAddress}>
				<div style={{height: '.24rem'}}></div>
				<div>
					<Title text='邮政速递人员将按此地址上门取件和送件，请准确、完整的填写' isLine={true}/>
					<InputItem type="text" index='2' itemText="姓名" maxLength="12" placeHolder="收件人姓名" id="name"
					value={this.state.name} showUnderLine={true} showTagText={false} creditCodeImg={this.state.nameImg} creditWidth = {this.state.nameWidth}
						onClick={()=>{
							this.setState({
								name: '',
								nameImg: 'hideDelete',
								nameNoBlur: false
							})

							document.querySelector('#name').focus();
						}}
						onBlur={(event)=>{
							let res = event.target.value;
							this.setState({nameNoBlur: true});
							setTimeout(()=>{
								if(!this.state.nameNoBlur) return;  //点击删除按钮不执行验证
								let value = res,
									nameRule1= /^[\u4e00-\u9fa5]{2,12}$/;

								if(value == ''){
									this.setState({
										nameImg: '',
									});
								}else if(nameRule1.test(value)){
									this.setState({
										nameImg: 'correct',
										nameWidth: '.4rem'
									});
								}else {
									this.setState({
										nameWidth: '.4rem',
										nameImg: 'error'
									})
								}
							},0)
						}}

						onFocus={(e)=>{
							let value = e.target.value;
							if(value.length!=0&&this.state.name==value){
								this.setState({
									nameImg: 'showDelete',
								});
							}
						}}
						onChange={(e) => {
							let value = e.target.value;
							if(value.length>0&&value!=' '){
								this.setState({
									nameImg: 'showDelete',
									name: e.target.value.replace(/(^\s*)|(\s*$)/g, "")
								});
							}else {
								this.setState({
									nameImg: 'hideDelete',
									name: e.target.value.replace(/(^\s*)|(\s*$)/g, "")
								});
							}
						}}/>

					<InputItem type="text" index='2' itemText="联系电话" maxLength="11" placeHolder="联系电话" id="phone"
					value={this.state.phone} showUnderLine={false} showTagText={false} creditCodeImg={this.state.phoneImg} creditWidth = {this.state.phoneWidth}
						onClick={()=>{
							this.setState({
								phone: '',
								phoneImg: 'hideDelete',
								phoneNoBlur: false
							})
							document.querySelector('#phone').focus();
						}}
						onBlur={(event)=>{
							let res = event.target.value;
							this.setState({phoneNoBlur: true});
							setTimeout(()=>{
								if(!this.state.phoneNoBlur) return;  //点击删除按钮不执行验证
								let value = res,
									phoneRule = /^0?1[3|4|5|7丨8][0-9]\d{8}$/;

								if(value == ''){
									this.setState({
										phoneImg: '',
									});
								}else if(phoneRule.test(value)){
									this.setState({
										phoneImg: 'correct',
										phoneWidth: '.4rem'
									});
								}else {
									this.setState({
										phoneWidth: '.4rem',
										phoneImg: 'error'
									})
								}
							},0)
						}}
						onFocus={(e)=>{
							let value = e.target.value;
							if(value.length!=0&&value==this.state.phone){
								this.setState({
									phoneImg: 'showDelete',
								});
							}
						}}
						onChange={(e) => {
							let value = e.target.value;
							if(value.length>0&&value!=' '){
								this.setState({
									phoneImg: 'showDelete',
									phone: e.target.value.replace(/(^\s*)|(\s*$)/g, "")
								});
							}else {
								this.setState({
									phoneImg: 'hideDelete',
									phone: e.target.value.replace(/(^\s*)|(\s*$)/g, "")
								});
							}
						}}/>
					<div style={{height: '.24rem'}}></div>

					<Picker extra="所在地区" data={this.props.provinceList}
						format={(values) => { { return values.join(''); } }}
						title="选择地区" {...getFieldProps('district', {
						onChange(e) {
							that.getRegion(e)
						},
					}) }
					>
						<List.Item arrow="horizontal"></List.Item>
					</Picker>
					<div className="border_bottom_1" style={{position: 'relative',paddingLeft: '.3rem'}}></div>
					<InputItem type="text" index='2' itemText="详细地址" maxLength="50" placeHolder="详细地址" id="details"
					value={this.state.details} showUnderLine={true} showTagText={false} creditCodeImg={this.state.detailsImg} creditWidth = {this.state.detailsWidth}
						onClick={()=>{
							this.setState({
								details: '',
								detailsImg: 'hideDelete',
								detailsNoBlur: false
							})
							document.querySelector('#details').focus();
						}}
						onBlur={(event)=>{
							let res = event.target.value;
							this.setState({detailsNoBlur: true});
							setTimeout(()=>{
								if(!this.state.detailsNoBlur) return;  //点击删除按钮不执行验证
								let value = res;
								if(value == ''){
									this.setState({
										detailsImg: '',
									});
								}
								else if(value.length>=5){
									this.setState({
										detailsWidth: '.4rem',
										detailsImg: 'correct'
									})
								}else {
									this.setState({
										detailsWidth: '.4rem',
										detailsImg: 'error'
									})
								}

							},0)
						}}
						onFocus={(e)=>{
							let value = e.target.value;
							if(value.length!=0&&value==this.state.details){
								this.setState({
									detailsImg: 'showDelete',
								});
							}
						}}
						onChange={(e) => {
							let value = e.target.value;
							if(value.length>0&&value!=' '){
								this.setState({
									detailsImg: 'showDelete',
									details: e.target.value.replace(/(^\s*)|(\s*$)/g, "")
								});
							}else {
								this.setState({
									detailsImg: 'hideDelete',
									details: e.target.value.replace(/(^\s*)|(\s*$)/g, "")
								});
							}
						}}/>
				</div>

					<div className={style.footBtn}>
						<button type="button" onClick={()=>{this.subMit()}}>保存</button>
						<div className={style.cancel} onClick={()=>{window.history.go(-1)}}>取消</div>
					</div>
			</div>
		);
    }
}


addAddress.contextTypes = {
	router: React.PropTypes.object.isRequired
}

function mapStateToProps(state){
	return Object.assign({}, state.homeReducer);	
}

const TestWrapper = createForm()(addAddress);

export default connect(mapStateToProps)(TestWrapper);

